<template>
  <div>
    <form>
      <div v-for="(item,index) of title" :key="item.index" class="select">
        <p>{{index+1}}、{{item.tiMu}}{{item.type==0?' (单选题)':' (多选题)'}}</p>

        <div v-for="(tiao,index) in item.xuanXiang" :key="tiao.index">
          <!-- 单选 -->
          <div v-if="item.type==0" class="option">
            <el-radio
              v-model="item.picked_radio"
              :label="haha[index]"
              @change="doCheck(item)"
            >{{haha[index]}}.{{tiao}}</el-radio>
          </div>
          <div v-if="item.type==1" class="option">
            <el-checkbox
              v-model="item.pickedMany"
              :label="haha[index]"
              @change="doCheck(item)"
            >{{tiao}}</el-checkbox>
          </div>
        </div>
      </div>
      <el-button type="primary" round @click="submit()">提交</el-button>
      <el-button type="primary" round @click="centerDialogVisible = true">答题情况</el-button>
    </form>
    <!-- 答题情况 -->
    <el-dialog title="答题情况" :visible.sync="centerDialogVisible" width="30%" center>
      <span v-for="(answer,index) in title " :key="index">
        <el-button v-if="answer.isRight!=null" style="border:1px solid #409EFF">第{{index+1}}题</el-button>
        <el-button v-else>第{{index+1}}题</el-button>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "onlineExam",
  data() {
    return {
      radio: "",
      centerDialogVisible: false,
      haha: ["A", "B", "C", "D"],
      title: [
        {
          isRight: null,
          picked_radio: [],
          pickedMany: [],
          daan: ["C"],
          tiMu: "1*8=?",
          xuanXiang: ["2", "6", "8", "10"],
          type: 0
        },
        {
          isRight: null,
          picked_radio: "",
          pickedMany: [],
          daan: ["D"],
          tiMu: "2*5=?",
          xuanXiang: ["2", "6", "8", "10"],
          type: 0
        },
        {
          isRight: null,
          picked_radio: "",
          pickedMany: [],
          daan: ["A", "B", "D"],
          tiMu: "下面哪些城市属于河南？",
          xuanXiang: ["郑州", "开封", "阜阳", "信阳"],
          type: 1
        },
        {
          isRight: null,
          picked_radio: "",
          pickedMany: [],
          daan: ["D"],
          tiMu: "纽约是下面哪个国家的城市?",
          xuanXiang: ["中国", "日本", "韩国", "美国"],
          type: 0
        },
        {
          isRight: null,
          ppicked_radio: "",
          pickedMany: [],
          daan: ["A"],
          tiMu: "2*8=?",
          xuanXiang: ["16", "6", "8", "10"],
          type: 0
        },
        {
          isRight: null,
          picked_radio: "",
          pickedMany: [],
          daan: ["B", "D"],
          tiMu: "下面哪些属于植物?",
          xuanXiang: ["狗", "棉花", "猫", "水稻"],
          type: 1
        }
      ]
    };
  },
  methods: {
    submit() {
      var index = 0;
      for (var i = 0; i < this.title.length; i++) {
        if (this.title[i].isRight === true) {
          index++;
        }
      }

      index = index * 10;
      alert(index + "分");
    },
    doCheck(item) {
      //单选
      if (item.type == 0) {
        if (item.picked_radio == item.daan[0]) {
          item.isRight = true;
        } else {
          item.isRight = false;
        }
      } else {
        //多选
        if (
          JSON.stringify(item.pickedMany.sort()) ==
          JSON.stringify(item.daan.sort())
        ) {
          item.isRight = true;
        } else {
          item.isRight = false;
        }
      }
    }
  }
};
</script>
<style lang='stylus' scoped>
.chose 
  border: 1px solid green;


.nochose 
  border: 1px solid red;


.select
  padding-bottom:30px;
  border-top: 1px solid #dedede;
  .option
    margin-top:10px;
  .el-radio:hover
      color: #1A8CFE;
  .el-checkbox:hover
      color: #1A8CFE;
</style>